---
title: 'Keyframes'
---

# CSS Keyframes

Using keyframes with Theme UI is fully supported, but not part of the Theme UI
library itself. Instead, use
[the `keyframes` helper from Emotion](https://emotion.sh/docs/keyframes).

## Usage

1. `import { keyframes } from '@emotion/react'`
2. Create a variable using `keyframes` for your animation (examples below)
3. Use the variable as the animation name, in an `animation` or `animationName`
   declaration

<Note>

`@emotion/react` is a peer dependency of Theme UI, so while required alongside
Theme UI packages, it needs manual installation in your project.

</Note>

## Examples

Using object syntax:

```js
import { Box } from 'theme-ui'
import { keyframes } from '@emotion/react'

const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })

export default (props) => (
  <Box {...props} sx={{ animation: `${fadeIn} 1s backwards` }} />
)
```

<Note>

To directly set `animationName` using object syntax, append `.toString()` to the
animation variable. This workaround is not needed when using the variable inside
a template string, such as above.

</Note>

Using template literal syntax:

```js
import { jsx } from 'theme-ui'
import { keyframes } from '@emotion/react'

const wave = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-5deg);
  }
`

export default (props) => (
  <div
    {...props}
    sx={{ animation: `${wave} 0.5s linear infinite alternate` }}
  />
)
```
